<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			我的预约
		</tn-nav-bar>
		<!-- 直播中 -->
		<view :style="{ marginTop: vuex_custom_bar_height + 'px' }">
			<text class="tn-icon-video tn-color-red" style="padding: 20rpx; font-size: 40rpx;"></text>
			<text style="font-size: 36rpx">直播中</text>
			<view class="search-conten">
				<nobutton-preview-list :dataList="nowLiveData" @getNowLive="getNowLive"></nobutton-preview-list>
			</view>
		</view>

		<!-- 未开始 -->
		<view :style="{paddingTop: '10px'}">
			<text class="tn-icon-video tn-color-blue" style="padding: 20rpx; font-size: 40rpx;"></text>
			<text style="font-size: 36rpx; ">未开始</text>
			<view class="search-conten">
				<nobutton-preview-list :dataList="noStartLiveData"
					@getNoStartLive="getNoStartLive"></nobutton-preview-list>
			</view>
		</view>
		<view :style="{paddingTop: '10px'}">
			<!-- 直播回放 -->
			<text class="tn-icon-video tn-color-yellow" style="padding: 20rpx; font-size: 40rpx;"></text>
			<text style="font-size: 36rpx">直播回放</text>
			<view class="search-conten">
				<nobutton-preview-list :dataList="endLiveData" @getEndLive="getEndLive"></nobutton-preview-list>
			</view>
			<!-- 加载更多状态 -->
			<view class="loading-more-footer">
				<tn-load-more v-if="endLiveDataLoadStatus === 'loading'" :status="endLiveDataLoadStatus"
					loadingText="加载中..." />
				<tn-load-more v-if="endLiveDataLoadStatus === 'noMore'" :status="endLiveDataLoadStatus"
					noMoreText="没有更多了" />
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getReservationLiveByUserId
	} from '@/util/index.js'
	export default {
		data() {
			return {
				loading: {
					upcoming: true,
					live: true,
					replay: true
				},
				page: 1,
				limit: 4,
				noStartLiveData: [],
				nowLiveData: [],
				endLiveData: [],
				endLiveDataPage: 1,
				endLiveDataLoadStatus: 'more', // 直播回放数据加载状态
			};
		},
		// 页面触底事件
		onReachBottom() {
			this.loadMoreEndLive()
		},
		props: {
			liveTypeId: {
				type: String,
				default: ''
			}
		},
		mounted() {
			this.getNoStartLive()
			this.getNowLive()
			this.getEndLive()
		},
		methods: {

			// 未开始直播列表
			async getNoStartLive() {
				this.loading.upcoming = true
				try {
					const res = await getReservationLiveByUserId({
						page: this.page,
						limit: this.limit,
						liveStatus: 1
					})

					if (res.list && res.list.length > 0) {
						this.noStartLiveData = res.list
					} else {
						this.noStartLiveData = []
					}
				} finally {
					this.loading.upcoming = false
				}
			},
			// 直播中列表
			async getNowLive() {
				this.loading.live = true
				try {
					const res = await getReservationLiveByUserId({
						page: this.page,
						limit: this.limit,
						liveStatus: 0
					})

					if (res.list && res.list.length > 0) {
						this.nowLiveData = res.list
					} else {
						this.nowLiveData = []
					}
				} finally {
					this.loading.live = false
				}
			},
			// 已结束直播列表
			async getEndLive() {
				this.endLiveDataLoadStatus = 'loading';
				this.endLiveDataPage = 1;
				try {
					const res = await getReservationLiveByUserId({
						page: this.endLiveDataPage,
						limit: this.limit,
						liveStatus: 2
					})

					if (res.list && res.list.length > 0) {
						this.endLiveData = res.list;
						this.endLiveDataLoadStatus = res.total > res.list.length ? 'more' : 'noMore';
					} else {
						// this.endLiveData = []
						this.endLiveDataLoadStatus = 'noMore'
					}
				} finally {
					this.loading.replay = false
				}
			},

			// 触底加载已结束直播列表
			async loadMoreEndLive() {
				if (this.endLiveDataLoadStatus === 'loading' || this.endLiveDataLoadStatus === 'noMore') return;

				this.endLiveDataLoadStatus = 'loading';
				this.endLiveDataPage++;
				this.loading.replay = true
				try {
					const nextPage = this.endLiveDataPage + 1;
					const res = await getReservationLiveByUserId({
						page: this.endLiveDataPage,
						limit: this.limit,
						liveStatus: 2
					})

					if (res.list && res.list.length > 0) {
						// 追加新数据
						this.endLiveData = [...this.endLiveData, ...res.list];
						this.endLiveDataPage = nextPage;

						// 更新加载状态
						this.endLiveDataLoadStatus = nextPage * this.limit < res.total ? 'more' : 'noMore';
					} else {
						this.endLiveDataLoadStatus = 'noMore';
					}
				} catch (error) {
					console.error('加载更多失败', error);
					this.endLiveDataLoadStatus = 'more'; // 出错时重置状态允许重试
				}
			}

		}
	}
</script>

<style lang="less">
	.search-conten {}

	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 20rpx 20rpx;
		position: fixed;
		background-color: #FFFFFF;

		.search-input {
			padding: 0 40rpx;
			font-size: 34rpx;
			flex: 1;
			background-color: #eeeeee;
			border-radius: 40rpx;
			margin-right: 20rpx;
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 150rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #01BEFF;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.load-more {
		padding: 20rpx;
	}

	/* 添加加载和空状态样式 */
	.loading-state,
	.empty-state {
		padding: 40rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}

	/* 直播状态标签 */
	.live-status {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background: rgba(232, 73, 73, 0.8);
		color: white;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		z-index: 2;

		&.replay {
			background: rgba(107, 208, 152, 0.8);
		}
	}

	/* 其他样式保持原样 */
	.waterfall-container {
		column-count: 2;
		column-gap: 0;
		width: 100%;
	}

	.waterfall-item {
		background-color: #FFFFFF;
		break-inside: avoid;
		overflow: hidden;
	}

	.tn-blogger-content {
		&__wrap {
			box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 20rpx;
			margin: 15rpx;
			position: relative;
			/* 为直播状态标签定位 */
		}

		/* 其他样式... */
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
		height: 260rpx;
		/* 确保高度固定 */
		position: relative;
	}

	/* 加载更多状态样式 */
	.loading-more-footer {
		padding: 20rpx 0;
		text-align: center;
	}

	/* 响应式布局调整 */
	@media (max-width: 600px) {
		.waterfall-container {
			column-count: 1;
		}
	}
</style>